<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>

<body>

    <table class="layui-hide" id="test"></table>


    <script src="../layui/layui.js" charset="utf-8"></script>


    <script>
        layui.use('table', function () {
            var table = layui.table;
            var $ = layui.jquery
            $.ajax({
                url: '../data/citySilk.json',
                type: "GET",//请求方式为get
                dataType: "json", //返回数据格式为json
                async: false,//设置ajax为同步请求, 默认为异步
                success: function (data) {
                    table.render({
                        elem: '#test'
                        , cellMinWidth: 80 
                        , cols: [[
                            { field: 'number', title: '序号', align: 'center', type: 'numbers' }
                            , { field: 'name', width: 80, title: '名称' }
                            , { field: 'country', width: 80, title: '国家', sort: true }
                            , { field: 'description', title: '描述', sort: true }
                        ]]
                        , data: data.data
                        ,limit:200
                    });

                }
            });

            table.on('row(test)', function (obj) {
                var data = obj.data;
                layer.alert(JSON.stringify(data), {
                    title: '当前行数据：'
                });

                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });
        });
    </script>

</body>

</html>